<template>
	<view v-if="show" class="detail-content-view">
		<view class="up-content-view">
			<view class="close-view" @tap.stop="cancel"><u-icon name="close-circle-fill" size="38" color="red"></u-icon></view>
			<view class="up-title">升级plus订阅会员权益</view>
			<view class="up-text1">完整的 <text style="color: red;background-color: #fff;">AI助理</text> 功能体验</view>
			<view class="up-content1">
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">无限容量和标注</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">全文深度搜索</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">嵌套收藏夹</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">嵌套标签</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">移动端密码锁</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">批量导出</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">网页快照存档</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">语音视频转文字</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">图像识别&OCR</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">20M文件临存</view>
				</view>
				<view class="up-list">
					<view><u-icon name="photo" color="#fff"></u-icon></view>
					<view class="up-list-text">API扩展&邮箱收藏</view>
				</view>
			</view>
			<view class="up-bottom-view">
				<view class="price-view">
					<view class="price-view1" @tap.stop="goPay">￥15.00/月</view>
					<view class="price-view2" @tap.stop="goPay">￥98.00/年</view>
				</view>
				<view class="price-text1">
					订阅会自动续费,除非您在当前订阅结束前24小时以上取消自动续订.订阅高级会员既表示您接受我们的<text style="color: blue;">隐私政策</text>和<text style="color: blue;">使用条款</text>
				</view>
			</view>
		</view>
		<Question :show="showQuestion" @close="closeQuestion" />
	</view>
</template>

<script>
	import Question from '@/components/question/question.vue'
	export default {
		props: ['show'],
		data() {
			return { showQuestion: false }
		},
		components:{ Question },
		methods: {
			cancel() {
				this.$emit('changeShow')
			},
			goPay() {
				uni.showModal({
					content: '请确认支付',
					success: res => {
						if (res.confirm) {
							uni.showToast({ title: '购买成功' })
							this.showQuestion = true
						}
					}
				})
			},
			closeQuestion(){
				this.showQuestion = false
				this.cancel()
			}
		}
	}
</script>

<style scoped>
	.detail-content-view {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, .2);
		position: fixed;
		left: 0;
		top: 0;
	}

	.up-content-view {
		width: 300px;
		height: 500px;
		background-color: #E7E8ED;
		padding: 30px;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		position: relative;
	}
	.close-view {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.up-title {
		font-size: 32rpx;
		font-weight: 500;
		background-color: red;
		color: #fff;
		padding: 12rpx;
	}

	.up-text1 {
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.up-content {
		width: 100%;
		height: 200px;
		background-color: antiquewhite;
		margin-top: 30rpx;
	}

	.up-content1 {
		background-color: #3F61DD;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.up-list {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
	}

	.up-list-text {
		color: #fff;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.pay-btn-view {
		width: 300px;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
	}

	.cancel-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		border-right: 1rpx solid #f0f0f0;
		cursor: pointer;
	}

	.pay-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		cursor: pointer;
	}

	.up-bottom-view {
		background-color: #DBD1EA;
		padding: 30rpx;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.price-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.price-view1 {
		background-color: #9F9EE0;
		color: blue;
		padding: 20rpx 36rpx;
		border-radius: 20rpx;
	}
	.price-view2 {
		background-color: #2E44E8;
		color: #fff;
		padding: 20rpx 36rpx;
		border-radius: 20rpx;
	}
	.price-text1 {
		margin-top: 10rpx;
		font-size: 18rpx;
		color: #aaa;
	}
</style>